<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>国内折扣列表</title>
</head>
<link rel="stylesheet" href="css/gsproduct.css">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<script src="js/template.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script src="js/inlanddiscount.js"></script>
<body>
<!--顶部-->
<div class="shen clearfix">
    <a href="index.html" class="glyphicon glyphicon-chevron-left  fl"></a>
    <div class="fl">凑单品</div>
    <img src="images/header_app.png" alt="" class="fr">
</div>

<!--导航-->
<div class="sou clearfix">
    <div class="shop fl">

    </div>
    <div class="from fl">
    </div>
    <div class="money fl">
        全部价格
    </div>
    <div class="logo fl glyphicon glyphicon-search"></div>
</div>
<div class="sous">
    <ul class="shops ">
    </ul>

    <ul class="froms ">
    </ul>
</div>
<!--商品-->
<div class="main clearfix">
    <div class="fl box">
    </div>
</div>
<!--底部-->
<ul class="na clearfix" role="tablist">
<li><a href="#">登陆</span></a></li>
<li><a href="#">注册</a></li>
<li><a href="#">返回顶部 </a></li>
</ul>
<div class="gong">手机APP下载<a href=""> 慢慢买手机版 --掌上比价平台</a>
<p>m.m.maimai.com</p>
</div>
</body>
<script>
    $(document).ready(function () {
        var shopid = null, areaid = null;
        function on_load(shopid,areaid) {
            $.ajax({
                dataType: 'jsonp',
//                crossDomain: true,
                url: 'http://192.168' +
                '.23.81:3000/api/getgsproduct',
                dataType: 'jsonp',
                crossDomain: true,
                data: {shopid: shopid, areaid: areaid},
                success: function (data) {
                    console.log(data);
                    var html = template("pic", data)
                    $(".box").html(html);
                }
            });
        }
        $.ajax({
            dataType: 'jsonp',
//            crossDomain: true,
            url: 'http://192.168.23.81:3000/api/getgsshop',
            success:function (data) {
                var html10 = data.result[0].shopName;
                $(".shop").html(html10)
                var html=template("template",data)
                $(".shops").html(html)
                shopid = data.result[0].shopId;
                $(".shop").click(function (){
                    $(".sous .froms").css("display","none") ;
                    var block = $(".sous .shops").css("display") ;
                    if (block=="block"){
                        $(".sous .shops").toggle()
                    }
                    else {
                        $(".shops").css("display", "block");
                        $(".shops li").on("click",function () {
                            shopid=$(this).attr("shopid")
                            on_load(shopid,areaid)
                            console.log(shopid);
                            var text=$(this).text();
                            $(".shop").text(text)
                            $(".shops").css("display","none")
                        })
                    }
                })
            }
        })
        $.ajax({
            dataType: 'jsonp',
//            crossDomain: true,
            url: 'http://192.168.23.81:3000/api/getgsshoparea',
            success:function (data) {
                var html10 = data.result[0].areaName;
                $(".from").html(html10)
                var html=template("templat",data)
                $(".froms").html(html)
                areaid=data.result[0].areaId;
                on_load(shopid,areaid)
                $(".from").click(function () {
                    $(".sous .shops").css("display","none") ;
                    var block = $(".sous .froms").css("display") ;
                    if (block=="block"){
                        $(".sous .froms").toggle()
                    }
                    else {
                        $(".froms").css("display", "block");
                        $(".froms li").on("click",function () {
                            areaid=$(this).attr("areaid")
                            var text=$(this).text();
                            text=text.slice("0",2)
                            $(".from").text(text)
                            $(".froms").css("display","none")
                            on_load(shopid,areaid)
                        })
                        $(".sous .from").toggle()
                    }
                })
            }
        })
    })

</script>
<!--导航模板-->
<script type="text/html" id="template">
    {{if result}}
    {{each result as value}}
    <li shopid="{{value.shopId}}">{{value.shopName}}</li>
    {{/each}}
    {{/if}}
</script>
<script type="text/html" id="templat">
    {{if result}}
    {{each result as value}}
    <li areaid="{{value.areaId}}">{{value.areaName}}</li>
    {{/each}}
    {{/if}}
</script>
<!--商品列表-->
<script type="text/html" id="pic">
    {{if result}}
    {{each result as value}}
    <div><img src="{{value.productImg}}" alt="">
        <p>{{value.productName}}</p>
        <p>
            <span>{{value.productPrice}}</span>
            <span>去凑单</span>
        </p>

    </div>
    {{/each}}
    {{/if}}
</script>
</html>